<template>
	<view class='code'>
	        <view>
	            <u-navbar :autoBack="true"></u-navbar>
	        </view>
	        <view class='code-main'>
	            <view class='code-msg'>输入6位验证码</view>
	            <view class='code-time'>
	                <view>验证码已发送至 {{ setPhone }}</view>
	                <view v-if='isShow'>{{ codeNum }}s后重发</view>
					<view v-if='!isShow' @click='sendCode'>收不到验证码?</view>
	            </view>
	            <view class='code-num'>
	                <u-code-input v-model="valCode" :maxlength="6"></u-code-input>
	            </view>
	        </view>
	    </view>
</template>

<script>
	import { sendRegisterOrLoginCaptcha , loginByMobile  } from '../../api/login.js'
	import { Encrypt } from '@/utils/aes.js'
	import { mapMutations } from 'vuex'
	export default{
	    data () {
	        return {
	            phone:'',
	            codeNum:60,
	            valCode:'',
	            isShow:true
	        }
	    },
	    onLoad( e ) {
	        this.phone = e.tel;     
	        this.sendCode();
			
			//发送短信验证码
        sendRegisterOrLoginCaptcha({
            mobile:this.phone
        })
	    },
	    computed:{
	        setPhone(){
	            let arr = this.phone.split('');
	            arr.splice(3,0,' ');
	            arr.splice(8,0,' ');
	            return arr.join('');
	        }
	    },
	    methods:{
			 ...mapMutations(['setToken']),
	        sendCode(){
	            this.isShow=true;
	            let timer = setInterval(()=>{
	                this.codeNum--;
	                if( this.codeNum <= 0 ){
	                    this.isShow=false;
	                    this.codeNum = 60;
	                    clearInterval( timer );
	                }
	            },1000)
	        }
	    },
	    watch:{
	        valCode( newVal , oldVal ){
	            if( newVal.length == 6 ){
                //发起请求
                loginByMobile({
                    mobile:Encrypt(this.phone),
                    captcha:newVal
                }).then(res=>{
					// console.log(res)
					this.setToken(res.accessToken)
					 uni.switchTab({
                     url:'/pages/tabs/me'
                    })
                })
            } 
	        }
	    }
	}
</script>

<style>
	.code{
	    width: 100vw;
	    height: 100vh;
	    background: rgba(255,255,255,0.39);
	}
	.code-main{
	    display: flex;
	    flex-direction: column;
	    align-items: flex-start;
	    padding-top:163rpx;
	    padding-left:62rpx;
	    padding-right: 62rpx;
	}
	.code-msg{
	    font-size: 56rpx;
	    font-weight: bold;
	    color: #343234;
	}
	.code-time{
	    display: flex;
	    align-items: center;
	    justify-content:space-between;
	    width: 100%;
	    padding-top:33rpx;
	    font-size: 28rpx;
	    font-weight: 400;
	    color: #343234;
	    opacity: 0.53;
	}
	.code-num{
	    display: flex;
	    justify-content: center;
	    width: 100%;
	    padding-top:83rpx;
	}
</style>